<script lang="ts" setup>
import { ref, unref, toRaw, reactive, isReactive } from 'vue'
interface IUser {
    name?: string
    age?: number
}
const userInfo = ref({
    name: 'zhen',
    age: 29
})
const userInfoR = reactive({
    name: 'chen',
    age: 26
})
const changeRef = () => {
    console.log('转换前userInfo==', userInfo, isReactive(userInfo))
    console.log('转换后userInfo==', unref(userInfo), isReactive(unref(userInfo)))
    console.log('===', toRaw(userInfo))

    console.log('转换前userInfoR==', userInfoR, isReactive(userInfoR))
    console.log('转换后userInfoR==', toRaw(userInfoR))
}
</script>
<template>
    <div>响应式对象到非响应式对象的转换</div>
    <div>
        <div>
            <div>unref</div>
            <a-button @click="changeRef">转化成普通函数-unref</a-button>
        </div>
        <div>
            <div>toRaw</div>
            <a-button>转化成普通函数-toRaw</a-button>
        </div>
    </div>
</template>